<template>
  <div v-loading.fullscreen.lock="loading"  element-loading-background="rgba(0, 0, 0, 0.8)">
    <!--搜索-->
    <el-row class="searchBox" :gutter="20">
      <el-col :span="5">
        <el-input size="mini" v-model="getListData.fuzzyInfo" placeholder="用户名/真实姓名/电话/邮箱" >
        </el-input>
      </el-col>
      <el-col :span="8">
      <el-button-group>
        <el-button type="default" @click="searchData" icon="el-icon-search"  size="mini">查询</el-button>
        <el-button type="default" @click="resetInput" icon="el-icon-refresh"  size="mini">重置</el-button>
        <el-button  type="primary" icon="el-icon-plus" @click="showAddBox()"   size="mini">添加</el-button>
      </el-button-group>
      </el-col>
    </el-row>
    <!--数据表格-->
    <el-table :data="dataSource"
      style="width: 100%"
      stripe >
      <el-table-column prop="adminName" min-width="100" label="用户名" ></el-table-column>
      <el-table-column prop="adminCustominfo1" min-width="100"  label="真实姓名" ></el-table-column>
      <el-table-column prop="adminEmail" label="邮箱" min-width="200"></el-table-column>
      <el-table-column prop="adminTel" min-width="100"  label="联系电话" ></el-table-column>
      <el-table-column label="角色" min-width="100"  >
        <template slot-scope="scope">
          <div>{{scope.row.adminLimit|adminLimit}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="adminTel" min-width="100"  label="状态" ></el-table-column>
      <el-table-column label="操作" align="center" min-width="300">
        <template slot-scope="scope">
        <el-button-group>
          <el-button  @click="handleEdit(scope.row)" type="default" icon="el-icon-edit"  size="mini">编辑</el-button>
          <el-button  @click="handleDel( scope.row)" type="default" icon="el-icon-delete"   size="mini">删除</el-button>
          <el-button @click="handleResPwd(scope.row)" type="default" icon="el-icon-document"  size="mini">重置密码</el-button>
        </el-button-group>
        </template>
      </el-table-column>
    </el-table>
        <!--分页-->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paginationData.currentPage"
        :background="true"
        :page-sizes="paginationData.pageSizes"
        :page-size="paginationData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginationData.total">
      </el-pagination>
    </div>
    <!--弹窗-->
    <!--添加用户弹窗dialogAddVisible-->
    <el-dialog title="添加用户"
    :visible.sync="dialogAddVisible"
    @close="closeAddModel('addRules')"
     width="500px"
    :close-on-click-modal="false">
      <el-form :model="addForm" :rules="addRules" status-icon ref="addRules" >
        <el-form-item label="用户名"  label-width="80px" prop="adminName" >
          <el-input size="mini" v-model="addForm.adminName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码"  label-width="80px" prop="adminPwd" >
          <el-input size="mini" type="password" v-model="addForm.adminPwd" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名"  label-width="80px" prop="adminCustominfo1" >
          <el-input size="mini" v-model="addForm.adminCustominfo1" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号"  label-width="80px" prop="adminTel">
          <el-input size="mini" v-model="addForm.adminTel" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱"  label-width="80px" prop="adminEmail">
          <el-input size="mini" v-model="addForm.adminEmail" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色"  label-width="80px" prop="adminLimit" >
          <el-select size="mini" v-model="addForm.adminLimit" placeholder="请选择">
            <el-option
              v-for="item in searchFormData.adminLimitOption"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancleAdd()"  size="mini">取 消</el-button>
        <el-button type="primary" @click="addUser('addRules')"  size="mini">确 定</el-button>
      </div>
    </el-dialog>
    <!--编辑用户弹窗dialogEditVisible-->
     <el-dialog title="修改用户资料"
     width="500px"
     :visible.sync="dialogEditVisible"
     @close="closeUpdateModel('updateRules')"
     :close-on-click-modal="false">
      <el-form :model="editForm" :rules="updateRules" status-icon ref="updateRules" >
        <el-form-item label="真实姓名"  label-width="80px" prop="adminCustominfo1" >
          <el-input size="mini" v-model="editForm.adminCustominfo1" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号"  label-width="80px" prop="adminTel" >
          <el-input size="mini" v-model="editForm.adminTel" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱"  label-width="80px" prop="adminEmail">
          <el-input size="mini" v-model="editForm.adminEmail" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色"  label-width="80px" prop="adminLimit">
          <el-select size="mini" v-model="editForm.adminLimit" placeholder="请选择">
            <el-option v-for="item in searchFormData.adminLimitOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="saveEdit('updateRules')" size="mini">确 定</el-button>
      </div>
    </el-dialog>
    <!--重置密码弹窗dialogResetPassVisible-->
    <el-dialog title="重置密码"
    :visible.sync="dialogResetPassVisible"
    @close="calseResPwd('updatePwdRulles')"
    width="500px"
    :close-on-click-modal="false">
      <el-form :model="resetPsdForm" status-icon  :rules="updatePwdRulles" ref="updatePwdRulles">
         <el-form-item label="旧密码" label-width="100px" prop="adminPwd">
          <el-input size="mini" type="password" v-model="resetPsdForm.adminPwd" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" label-width="100px" prop="fuzzyInfo">
          <el-input size="mini" type="password" v-model="resetPsdForm.fuzzyInfo" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="重新输入密码" label-width="100px" prop="relPassword">
          <el-input size="mini" type="password" v-model="resetPsdForm.relPassword" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancleResPwd()"  size="mini">取 消</el-button>
        <el-button type="primary" @click="saveResPwd('updatePwdRulles')"  size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import adminController from '@/api/adminController/index'
export default {
  name: 'sysUser',
  data() {
    /**新增判重 */
    var checkName = (rule,value,callback)=>{
      let formData = {
        adminName:value
      }
      adminController.checkName(formData).then(response=>{
        if(response.data.isRepeat){
          callback(new Error(response.data.msg));
        }else{
          callback();
        }
      }).catch((error)=>{
          callback(new Error('验证失败'));
      })
    };
    var checkPwd = (rule,value,callback)=>{
      if(value!=this.resetPsdForm.fuzzyInfo){
        callback(new Error('两次输入密码不一致，请重新输入密码'))
      }
      callback()
    }
    // var checkEmail =(rule,value,callback)=>{
    //   let formData = {
    //     adminEmail:value
    //   }
    //   adminController.checkEamil(formData).then(response=>{
    //     if(response.data.isRepeat){
    //       callback(new Error(response.data.msg));
    //     }else{
    //       callback();
    //     }
    //   }).catch((error)=>{
    //       callback(new Error('验证失败'));
    //   })
    // };
    // var checkTel=(rule,value,callback)=>{
    //   let formData = {
    //     adminTel:value
    //   }
    //   adminController.checkTel(formData).then(response=>{
    //     if(response.data.isRepeat){
    //       callback(new Error(response.data.msg));
    //     }else{
    //       callback();
    //     }
    //   }).catch((error)=>{
    //       callback(new Error('验证失败'));
    //   })
    // };
    return {
      loading:false,
      dataSource:[],
      searchFormData:{
        adminLimitOption:null
      },
      dialogAddVisible:false,
      dialogResetPassVisible:false,
      dialogEditVisible:false,
      paginationData:{
        currentPage:1,
        pageSizes:[10,20,30],
        pageSize:10,
        total:0
      },
      getListData:{
        fuzzyInfo:null,
        pageSize:10,
        pageNum:1
      },
      editForm:{// 编辑form
        adminName:null,
        adminCustominfo1:null,
        adminTel:null,
        adminEmail:null,
        adminLimit:null
      },
      updateBeforeName:null,
      updateBeforeTel:null,
      updateBeforeEmail:null,
      addForm:{ //添加form
       adminName:null, //用户名
       adminPwd:null, //密码
       adminCustominfo1:null,//真实姓名
       adminTel:null,//手机号
       adminEmail:null,//邮箱
       adminCustominfo5:0,//状态
       adminLimit:'0'//权限字符 0：超级管理员 1：超级管理员
      },
      addRules:{
         adminName:[
            {required:true,message:'请输入用户名',trigger:'blur'},
            { validator: checkName, trigger: 'change' },
          ],
         adminPwd:[
            {required:true,message:'请输入密码',trigger:'blur,change'},
          ],
         adminCustominfo1:[
            {required:true,message:'请输入真实姓名',trigger:'blur,change'},
          ],
         adminTel:[
            {required:true,message:'请输入手机号',trigger:'blur,change'},
            {pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/, message: '手机号格式错误',trigger:'blur,change'},
            // { validator: checkTel, trigger: 'change' },
          ],
         adminEmail:[
            {required:true,message:'请输入邮箱',trigger:'blur,change'},
            {pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: '邮箱格式错误',trigger:'blur,change'},
            // { validator: checkEmail, trigger: 'change' },
          ],
         adminLimit:[
            {required:true,message:'请选择权限',trigger:'blur,change'}
          ]
      },
      updateRules:{
         adminCustominfo1:[
            {required:true,message:'请输入真实姓名',trigger:'blur,change'},
          ],
         adminTel:[
            {required:true,message:'请输入手机号',trigger:'blur,change'},
            {pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/, message: '手机号格式错误',trigger:'blur,change'}
          ],
         adminEmail:[
            {required:true,message:'请输入邮箱',trigger:'blur,change'},
            {pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: '邮箱格式错误',trigger:'blur,change'}
          ],
         adminLimit:[
            {required:true,message:'请选择权限',trigger:'blur,change'}
          ]
      },
      updatePwdRulles:{
        adminPwd:[
          {required:true,message:'请输入旧密码',trigger:'blur,change'},
        ],
        fuzzyInfo:[
          {required:true,message:'请输入新密码',trigger:'blur,change'},
        ],
        relPassword:[
          {required:true,message:'请输重新输入新密码',trigger:'blur,change'},
          { validator: checkPwd, trigger: 'change,blur' },
        ],
      },
      resetPsdForm:{ // 重置密码form
        adminName:null,
        adminPwd:null, // 旧密码
        fuzzyInfo:null, // 新密码
        relPassword:null // 重新输入的密码
      }
      }
  },
  created() {
    this.init();
  },
  filters:{
    adminLimit:function(data){
      return data==0?'超级管理员':'普通管理员'
    }
  },
  methods: {
    init(){
      this.getAllLimit();
      this.getList();
    },
    getAllLimit(){
      adminController.getAdminAllLimit().then(response=>{
        this.searchFormData.adminLimitOption = response.data.list;
      })
    },
    handleDel(data,bool){
      let info = bool?"此操作将启用该用户，是否继续":"此操作将禁用该用户，是否继续？"
      this.$confirm(info,'提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let formData={
          username:data.username,
          state:bool?0:1
        }
        adminController.updateState(formData).then(response=>{
          if(response.success){
            this.$message({
              type: 'success',
              message: response.msg
            });
          }
        })
      })
    },
    searchData(){ // 搜索 需发送请求
      this.getList();
    },
    getList(){
      let formData = {
        fuzzyInfo:this.getListData.fuzzyInfo,
        pageNum:this.getListData.pageNum,
        pageSize:this.getListData.pageSize
      }
      this.loading = true;
      adminController.getList(formData).then(response=>{
        this.dataSource = response.data.list;
        this.paginationData.total = response.data.total;
        this.loading =false;
      }).catch(()=>{
        this.loading =false;
      })
    },
    resetInput(){ // 重置搜索框
      this.getListData={
        fuzzyInfo:null,
        pageNum:1,
        pageSize:this.getListData.pageSize
      }
      this.getList();
    },
    showAddBox(){  // 显示添加框 需发送请求、
      this.dialogAddVisible=true;
    },
    cancleAdd(){
      this.dialogAddVisible=false;
    },
    addUser(addRules){ // 添加用户 需发送请求
      this.$refs[addRules].validate((valid) => {
        let formData = this.addForm;
        this.loading = true;
        adminController.add(formData).then(response=>{
          this.loading= false;
          this.dialogAddVisible = false;
          this.getList();
          if(response.success){
            this.$message({
              type:'success',
              message:response.msg
            })
          }
        }).catch(()=>{
          this.loading = false;
        })
      })
    },
    handleEdit(row){ //编辑用户
      this.dialogEditVisible=true;
      this.updateBeforeName=row.adminName;
      this.updateBeforeTel=row.adminTel;
      this.updateBeforeEmail=row.adminEmail;
      this.editForm = {
        adminName:row.adminName,
        adminCustominfo1:row.adminCustominfo1,
        adminTel:row.adminTel,
        adminEmail:row.adminEmail,
        adminLimit:row.adminLimit
      }
    },
    saveEdit(updateRules){ // 保存修改
      this.$refs[updateRules].validate((valid) => {
        let formData = this.editForm;
        this.loading = true;
        adminController.update(formData).then(response=>{
          this.loading= false;
          this.dialogEditVisible =false;
          if(response.success){
            this.$message({
              type:'success',
              message:response.msg
            })
          }
        }).catch(()=>{
          this.loading = false;
        })
      })
    },
    clearAddFrom(){
      this.addForm = {
       adminName:null, //用户名
       adminPwd:null, //密码
       adminCustominfo1:null,//真实姓名
       adminTel:null,//手机号
       adminEmail:null,//邮箱
       adminCustominfo5:0,//状态
       adminLimit:'1'//权限字符 0：超级管理员
      }
    },
    closeAddModel(addRules){
      this.clearAddFrom();
      this.$refs[addRules].resetFields();
    },
    closeUpdateModel(updateRules){
      this.$refs[updateRules].resetFields();
    },
    handleResPwd(data){ // 显示修改密码框
      this.dialogResetPassVisible = true;
      this.resetPsdForm = {
        adminName:data.adminName,
        adminPwd:null, // 旧密码
        fuzzyInfo:null, // 新密码
        relPassword:null // 重新输入的密码
      }
    },
    cancleResPwd(){
      this.dialogResetPassVisible = false;
    },
    clearUpdatePwd(){
      this.resetPsdForm = {
        adminName:null,
        adminPwd:null, // 旧密码
        fuzzyInfo:null, // 新密码
        relPassword:null // 重新输入的密码
      }
    },
    calseResPwd(updatePwdRulles){
      this.clearUpdatePwd();
      this.$refs[updatePwdRulles].resetFields();
    },
    saveResPwd(updatePwdRulles){ //修改密码
      this.$refs[updatePwdRulles].validate((valid) => {
        if(valid){
          this.loading = true;
          let formData={
              adminName:this.resetPsdForm.adminName,
              adminPwd:this.resetPsdForm.adminPwd, // 旧密码
              fuzzyInfo:this.resetPsdForm.fuzzyInfo
          };
          adminController.updatePWd(formData).then(response=>{
            if(response.success){ //修改密码成功
              this.loading = false;
              this.$message({
                type: 'success',
                message: response.msg
              });
              this.dialogResetPassVisible = false;
            }
          }).catch(()=>{
            this.loading = false;
          })
        }
      })
    },
    handleSizeChange(val) { // 修改每页显示条数 需要发送请求
      this.paginationData.pageSize=val;
      this.getList();//重新获取当前页数据
    },
    handleCurrentChange(val) { // 修改当前页 需要发送请求
      this.paginationData.currentPage=val;
      this.getList();//重新获取当前页数据
    }
  }
}
</script>
<style>
 .el-table .del-row {
    background: #f5f7fa;
    opacity:0.5;
  }
  .searchBox{
    margin: 0 15px;
  }
  .searchBox .el-col{
    margin:10px;
  }
  .operationBox{
    margin-left:20px;
  }
  .operationBox .el-button{
    margin:10px 10px 10px 0;
  }
  .block{
    margin-top:20px;
  }
</style>
